<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>demo</title>
  <script type="text/javascript" src="../vue.js"></script>
</head>

<body>
  <div id="app">
    <ul>
      <p>key的选择</p>
      <button @click="addPerson">在第一个添加一个人</button>
      <li v-for="(p,index) in person" :key="p.id"> {{p.name}}---{{p.age}}
        <input type="text">
      </li>
      <!-- 
        ？？？？
        为什么错乱了
        在vue的diff算法,使用key来比较虚拟dom数据的
        使用index作为比较的标准，
        为什么要用id作为 key
        为什么不用index 作为 key

        
       -->
    </ul>
  </div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false;
  const vm = new Vue({
    el: "#app",
    data: {
      person: [
        { id: "001", name: "老王", age: 22 },
        { id: "002", name: "张兵", age: 33 },
        { id: "003", name: "素菜", age: 51 }
      ]
    },
    methods: {
      addPerson() {
        this.person.unshift({ id: "004", name: "小何 ", age: 36 },)
      }
    }
  })
</script>

</html>